<template>
    <div>
        <el-breadcrumb separator="/" class="title">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/business' }">后台管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>客服功能</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="business-chat">
            <div class="nav">
                <el-input size="small" style="width: 90%; margin: 0 1em" placeholder="请输入内容" v-model="searchName"></el-input>
                <div v-for="(item, index) in filterName" :key="index" @click="change(item, index)">
                    <div class="customer-item" :class="{active: isActive == index}">
                        <div><img :src="item.avatar" alt=""></div><p>{{item.uname}}</p>
                    </div>
                </div>
            </div>
            <div class="chat">
                <chat-view :customer="chat" @reply="reply"></chat-view>
            </div>
        </div>
    </div>

</template>

<script>
    import ChatView from "../ChatView";
    export default {
        name: "BusinessChat",
        data() {
            return {
                customer: [],
                isActive: 0,
                chat: {},
                searchName: ''
            }
        },
        components: {
            ChatView
        },
        sockets: {

            // accept: function (data) {
            //     this.news.push(data)
            // }
            disconnect: function(data) {
                console.log('断开连接')
            },
            sendToBusiness: function (data) {
                console.log(data)
                let isHas = false
                this.customer.forEach((item, index)=> {
                    if (item.uId == data.uId) {
                        isHas = true
                        this.customer[index].message.push({uId: data.uId, msg: data.msg})
                    }
                })
                if (!isHas) {
                    this.customer.push({
                        uId: data.uId,
                        uname: data.uname,
                        message: [{uId: data.uId, msg: data.msg}],
                        avatar: data.avatar
                    })
                }
            }
        },
        created() {

        },
        computed: {
            filterName() {
                return this.customer.filter(item=> item.uname.includes(this.searchName))
            }
        },
        methods: {
            reply(payload) {
                let num;
                this.customer.find((item, index)=> {
                    if (item.uId == payload.toId) {
                        num = index
                    }
                })
                this.customer[num].message.push({
                    uId: this.$store.state.businessUser._id,
                    msg: payload.text
                })
                this.$socket.emit('replay', {
                    uId: this.$store.state.businessUser._id,
                    msg: payload.text,
                    toId: payload.toId
                })
            },
            change(item, index) {
                this.chat = item
                this.isActive = index
            }
        }
    }
</script>

<style scoped>
    .title {
        margin: 20px 0;
    }
    .business-chat {
        width: 1300px;
        height: 750px;
        display: flex;
        margin: 0 auto;
    }
    .business-chat .nav {
        width: 200px;
        background-color: #EAEAEA;
        padding: 1em 0;
    }
    .business-chat .chat {
        flex: 1;
    }
    .customer-item {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        margin: 1em 0;
        height: 50px;
        padding: 1em;
    }
    .customer-item > div {
        width: 50px;
        height: 50px;
    }
    .customer-item img {
        width: 100%;
    }
    .customer-item > p {
        margin-left: 1em;
    }
    .active {
        background-color: #999999;
    }
</style>